<template>
	<view class="content">

		<view class="top">
			<image src="../../static/activity/medical_insurance/top.png" mode=""></image>
		</view>

		<view class="zhong">
			<image src="../../static/activity/medical_insurance/content.png" mode=""></image>
		</view>

		<view class="middle">
			<view class="title">
				<image src="../../static/activity/medical_insurance/title.png" mode=""></image>
			</view>
			<view class="box1">
				<view class="matter">
					<view>（一）缴费对象：柳钢本部（含十一冶）；</view>
					<view>（二）缴费标准：每人100元/年，其中单位工会经费补贴50元；</view>
					<view>（三）缴费时间：2024年11月4日-2024年11月19日</view>
					<view style="text-indent: 2em;">温馨提示：请您尽早在集中缴费期间完成医保缴费，以免耽误您正常享受医保待遇。</view>
				</view>
				<view class="bottom" @click="purchase" v-if="whether">
					<image src="../../static/activity/medical_insurance/bottom.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="guimodal_payment" v-if="show">
			<view class="pop">
				<view class="pay_title">请选择支付方式</view>
				<view v-for="(item, idx) in payment" :key="idx">
					<view class="money">{{item.title}}缴费金额: {{item.money}}元</view>
					<view class="way">选择支付方式: {{current}}</view>
					<view class="forr">
						<view v-for="(item2, idx) in item.range" :key="idx">
							<view @click="change_payType(item2.text)" class="box2"
								:class="item2.text == current ? 'golden' : 'black'">
								<image class="logo1" :src="item2.img" mode="aspectFit"></image>
								<view class="text">{{item2.text}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flexx">
					<view @tap="confirm_pay" class="confirm">确认</view>
					<view @tap="cancel_pay" class="cancel">取消</view>
				</view>
			</view>
		</view>

	</view>
</template>


<script>
	var ABCPay;
	var sweixin;
	export default {
		data() {
			return {
				whether: false,
				show: false,
				sweixin: '',
				payment: {
					qt: {
						title: "自治区医保",
						content: "缴费金额",
						fe_id: 67,
						examine_url: '/app/bill', //查询账单信息
						img: "https://boyaltd.oss-cn-hangzhou.aliyuncs.com/2022-05/27/LGZl6php2ueXxl1653626032220527.png",
						money: null,
					},
				},
				pay_types: [{
						id: 0,
						text: '微信直缴',
						img: "../../static/homePage/wx.png",
					},
					{
						id: 1,
						text: '农行支付',
						img: "../../static/homePage/nh.png",
					},
					{
						id: 2,
						text: '微缴费',
						img: "../../static/homePage/xcx.png",
					}
				],
				current: '农行支付',
				pay_type: null,
				payConfig: {
					wx: {
						sysId: "gh_edf4ceb10043",
						appid: "wxcf5c7da8bb74c8af",
						path: "pages/jf/wxpay"
					},
					wx_abc: {
						sysId: "gh_a6986a2f785e",
						appid: "wx78642797f4ce5e50",
						path: "page/containers/payment/query-input/query-input"
					}
				},
			}
		},
		onLoad() {
			uni.showLoading({
				title: '请稍候...'
			});
			// #ifdef APP-PLUS
			ABCPay = uni.requireNativePlugin('ABC-Pay');
			plus.share.getServices(function(s) {
				var shares = {};
				for (var i = 0; i < s.length; i++) {
					var t = s[i];
					console.log(t);
					shares[t.id] = t;
					console.log(t.id);
				}
				sweixin = shares['weixin'];
			}, function(e) {
				console.log("获取分享服务列表失败：" + e.message);
			});
			//#endif
			this.list_yb();
		},
		methods: {
			list_yb() {
				let self = this
				let item = self.payment.qt
				let data = {
					"fe_id": item.fe_id,
					"project_name": '医保',
					"newApp": true
				};
				console.log("list_yb", item.examine_url);
				self.$boya.NGet(item.examine_url, data, function(res) {
					console.log('自治区医保res: ', res);
					if (res.data.hasOwnProperty('pay_types')) {
						let pay_types = res.data.pay_types.split(',');
						if (pay_types.length > 0) {
							self.set_payType("qt", pay_types);
						}
					}
					self.payment.qt.money = res.data.money;
					self.payment.qt.orderid = res.data.no;
					self.payment.qt.merchant_id = res.data.merchant_id;
					self.payment.qt.fe_id = res.data.fe_id;
					self.whether = true
					uni.hideLoading();
				}, function(err) {
					console.log('自治区医保err: ', err);
				})
			},
			set_payType(name, items) {
				console.log('这里这里');
				//设置可用支付类型
				let range = [];
				items.map(item => {
					let pay = this.pay_types.find(p => p.text == item);
					if (pay) {
						range.push(pay);
					}
				})
				this.payment[name].range = range;
				console.log("set_payType", this.payment[name]);
			},
			purchase() {
				this.show = true
			},
			change_payType(text) {
				this.current = text;
				console.log("选择支付方式", this.current);
			},
			confirm_pay() {
				let self = this
				console.log('money: ', self.payment.qt.money);
				console.log('current: ', self.current);
				self.to_pay();
			},
			cancel_pay() {
				this.show = false
			},
			to_pay() {
				let self = this
				console.log('缴费方式：', self.current);

				this.$boya.NGet("/app/pay/order_query", self.payment.qt, function(res) {
					console.log(res);
					//订单已经支付
					self.$boya.msg(res.msg);
				}, function() {
					switch (self.current) {
						case '微信直缴':
							//微信直缴-转到柳钢之家小程序续费
							self.wx_mini_pay();
							break;
						case '农行支付':
							self.abc_pay();
							//农行支付
							break;
						case '微缴费':
							self.abc_mini_pay()
							//农行微缴费小程序
							break;
					}
				});
			},
			// 微信直缴
			wx_mini_pay() { //转到柳钢小程序支付
				var self = this;
				let title = self.payment.qt.title
				// console.log('数据：', self.payment.qt.money + "-" + self.payment.qt.orderid + "-0");
				let code = self.payment.qt.money + "-" + self.payment.qt.orderid + "-0";
				console.log("code", code);
				console.log("path", self.payConfig.wx.path + "?code=" + code + "&title=" + title);
				//#ifdef APP-PLUS
				console.log(sweixin);
				sweixin ? sweixin.launchMiniProgram({
					id: self.payConfig.wx.sysId,
					path: self.payConfig.wx.path + "?code=" + code + "&title=" + title
				}) : plus.nativeUI.alert('当前环境不支持微信操作!');
				//#endif
				this.show = false
			},
			// 农行支付1
			abc_pay() {
				let self = this
				let data = {
					money: self.payment.qt.money,
					orderid: self.payment.qt.orderid,
					fe_id: self.payment.qt.fe_id
				}
				console.log("app_pay=>", data)
				self.$boya.Get("/api/app_pay", data, function(res) {
					console.log('农行res: ', res);
					self.abcApp(res.data.token);
				}, function(err) {
					console.log('农行err: ', err);
					self.$boya.msg('请稍后再试');
				})
				this.show = false
			},
			// 农行微缴费小程序
			abc_mini_pay() {
				var self = this;
				console.log('self.payment.qt.merchant_id-self.payment.qt.merchant_id: ', self.payment.qt.merchant_id);
				//#ifdef APP-PLUS
				this.$comm.log("swexin:" + self.payConfig.wx_abc.path + "?code=" + self.payment.qt.merchant_id);
				console.log(sweixin);
				sweixin ? sweixin.launchMiniProgram({
					id: self.payConfig.wx_abc.sysId,
					path: self.payConfig.wx_abc.path + "?code=" + self.payment.qt.merchant_id
				}) : plus.nativeUI.alert('当前环境不支持微信操作!');
				//#endif
				this.show = false
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url('../../static/activity/medical_insurance/bj.png') 100% 100% / 100% 100%;
	}

	.top {
		width: 85vw;
		height: 95rpx;
		margin-top: 50rpx;
		margin-left: 50rpx;
	}

	.top>image {
		width: 100%;
		height: 100%;
	}

	.zhong {
		width: 90vw;
		height: 750rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		position: relative;
		z-index: 1;
	}

	.zhong>image {
		width: 100%;
		height: 100%;
	}

	.middle {
		margin-top: -280rpx;
	}

	.title {
		width: 60vw;
		height: 128rpx;
		margin: 0 auto;
		position: relative;
		z-index: 4;
	}

	.title>image {
		width: 100%;
		height: 100%;
	}

	.box1 {
		width: 88vw;
		height: 650rpx;
		margin: 0 auto;
		background-color: white;
		border: 2px solid black;
		border-radius: 15rpx;
		margin-top: -66rpx;
		position: relative;
		z-index: 3;
	}

	.matter {
		font-size: 30rpx;
		padding: 70rpx 40rpx;
		line-height: 70rpx;
	}

	.bottom {
		width: 40vw;
		height: 160rpx;
		margin: 0 auto;
		margin-top: -60rpx;
	}

	.bottom>image {
		width: 100%;
		height: 100%;
	}

	.guimodal_payment {
		position: absolute;
		bottom: 0;
		background-color: white;
		border-radius: 15rpx 15rpx 0 0;
		z-index: 999;
		border-top: 2px solid #D8D8D8;
	}

	.pop {
		width: 100vw;
		height: 650rpx;
	}

	.pay_title {
		padding-top: 30rpx;
		font-size: 35rpx;
		text-align: center;
		font-weight: bold;
	}

	.money {
		margin-top: 35rpx;
		margin-left: 50rpx;
	}

	.way {
		margin-top: 35rpx;
		margin-left: 50rpx;
	}

	.forr {
		display: flex;
		justify-content: space-around;
		padding-top: 25rpx;
		padding-bottom: 30rpx;
	}

	.box2 {
		width: 150rpx;
		height: 180rpx;
		border-radius: 15rpx;
	}

	.golden {
		border: 3px solid #D4D0C9;
		background-color: #FEF9F2;
	}

	.black {
		border: 1px solid #D4D0C9;
		background-color: #ffffff;
	}

	.logo1 {
		width: 90rpx;
		height: 80rpx;
		margin-left: 32rpx;
		margin-top: 30rpx;
		position: relative;
	}

	.logo2 {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		margin-top: 28rpx;
		margin-left: -90rpx;
	}

	.text {
		font-size: 25rpx;
		text-align: center;
		color: #000;
		margin-top: 10rpx;
	}

	.flexx {
		display: flex;
		margin-top: 15rpx;
		justify-content: space-around;
		border-top: 10px solid #D8D8D8;
		padding-top: 35rpx;
	}

	.confirm {
		width: 300rpx;
		height: 45rpx;
		line-height: 45rpx;
		border-radius: 50rpx;
		background: linear-gradient(to right, #5F5F5F, #3B3B3B);
		color: #EAD5B0;
		text-align: center;
		padding: 20rpx 0;
	}

	.cancel {
		width: 300rpx;
		height: 45rpx;
		line-height: 45rpx;
		border-radius: 50rpx;
		background: linear-gradient(to right, #c8c8c8, #c1c1c1);
		color: black;
		text-align: center;
		padding: 20rpx 0;
	}
</style>